<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Caprice</title>
<link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/css/ie7.css" media="all" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="style/css/ie9.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="style/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="style/js/carousel.js"></script>
<script type="text/javascript" src="style/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="style/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
	<!-- Begin Sidebar -->
	<div id="sidebar">
		 <div id="logo"><a href="index.html"><img src="style/images/logo.png" alt="Caprice" /></a></div>
		 
	<!-- Begin Menu -->
    <div id="menu" class="menu-v">
      <ul>
        <li><a href="index.html" class="active">Home</a>
        	<ul>
        		<li><a href="index.html">Home w/ Carousel</a></li>
        		<li><a href="index2.html">Home w/ Portfolio</a></li>
        		<li><a href="index3.html">Home w/ Testimonials</a></li>
        	</ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>
        	<ul>
        		<li><a href="portfolio.html">Portfolio 4 Columns</a></li>
        		<li><a href="portfolio2.html">Portfolio 3 Columns</a></li>
        		<li><a href="portfolio3.html">Portfolio 2 Columns</a></li>
        		<li><a href="portfolio4.html">Portfolio 1 Column</a></li>
        		<li><a href="portfolio-post.html">Portfolio Post</a></li>
        	</ul>
        </li>
        <li><a href="blog.html">Blog</a>
        	<ul>
        		<li><a href="blog.html">Blog</a></li>
        		<li><a href="blog2.html">Blog w/ Sidebar</a></li>
        		<li><a href="post.html">Post</a></li>
        		<li><a href="post2.html">Post w/ Sidebar</a></li>
        	</ul>
        </li>
        <li><a href="buttons-boxes-images.html">Features</a>
        	<ul>
        		<li><a href="buttons-boxes-images.html">Buttons Boxes Images</a></li>
        		<li><a href="tabs-toggle-table.html">Tabs Toggle Tables</a></li>
        		<li><a href="testimonials.html">Testimonials</a></li>
        		<li><a href="typography.html">Typography</a></li>
        		<li><a href="service-icons.html">Service Icons</a></li>
        	</ul>
        </li>
        <li><a href="contact.html">Contact Us</a></li>
      </ul>
    </div>
    <!-- End Menu -->
   
    
    <div class="sidebox">
    <ul class="share">
    	<li><a href="#"><img src="style/images/icon-rss.png" alt="RSS" /></a></li>
    	<li><a href="#"><img src="style/images/icon-facebook.png" alt="Facebook" /></a></li>
    	<li><a href="#"><img src="style/images/icon-twitter.png" alt="Twitter" /></a></li>
    	<li><a href="#"><img src="style/images/icon-dribbble.png" alt="Dribbble" /></a></li>
    	<li><a href="#"><img src="style/images/icon-linkedin.png" alt="LinkedIn" /></a></li>
    </ul>
    </div>

    
	</div>
	<!-- End Sidebar -->
	
	<!-- Begin Content -->
	<div id="content">
	<h1 class="title">Typography</h1>
	<div class="line"></div>
	<div class="intro">Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
	
	
   	<div class="one-half">
        <h3>Unordered List</h3>
        <ul>
          <li>Pellentesque non diam et tortor dignissim. </li>
          <li>Neque sit amet mauris egestas quis mattis. </li>
          <li>Cras justo odio, dapibus ac facilisis.</li>
          <li>Curabitur viver justo sed scelerisque.</li>
        </ul>
      </div>
      <div class="one-half last">
        <h3>Ordered List</h3>
        <ol>
          <li>Pellentesque non diam et tortor dignissim. </li>
          <li>Neque sit amet mauris egestas quis mattis. </li>
          <li>Curabitur viver justo sed scelerisque.</li>
          <li>Condimentum aenean risus malesuada tortor.</li>
        </ol>
      </div>
      <div class="clear"></div>
      <div class="line"></div>
      <h3>Blockquote</h3>
      <blockquote><p>Pellentesque non diam et tortor dignissim bibendum. Neque sit amet mauris egestas quis mattis velit fringilla. Curabitur viver justo sed scelerisque.</p></blockquote>
      <div class="line"></div>
      <h3>Dropcap</h3>
      <p><span class="dropcap">D</span>uis non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper. Nulla facilisi. Donec interdum, enim in dignissim lacinia, lectus nisl viverra lorem, ac pulvinar nunc ante at neque. Proin et dui eros, at aliquet est. Pellentesque consectetur lectus quis enim mollis ut convallis urna malesuada. Sed tincidunt interdum sapien vel gravida. Nulla a tellus lectus, in aliquet tellus. Donec aliquam neque quis mi.
      <div class="line"></div>
      <h3>Hightlights</h3>
      <p>Duis non lectus sit amet est imperdiet cursus elementum vitae eros. <span class="lite1">This is hightlight</span> morbi vitae magna tellus, ac mattis urna. <span class="lite2">This is second highlight</span> posuere. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper.
      <div class="line"></div>
      <div class="one-third">
        <h3>Special Texts</h3>
        <p><em>This is emphasised text</em><br />
          <strong>This is strong text</strong><br />
          <abbr title="This is an abbr - &lt;abbr&gt;&lt;/abbr&gt;">This is an abbr</abbr><br />
          <del>This is deleted text</del><br />
          <a href="#">This is a link</a></p>
      </div>
      <div class="one-third">
        <h3>Code Display</h3>
        <pre><code>A block of code
A block of code
A block of code
A block of code
A block of code
A block of code</code></pre>
      </div>
      <div class="one-third last">
        <h3>Misc Typography</h3>
        <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. <abbr title="Avenue">AVE</abbr></p>
      </div>
      <div class="clear"></div>
    
    <!-- Begin Footer -->
    <div id="footer">
  	<div class="footer-box one-third">
  	<h3>Popular Posts</h3>
			<ul class="popular-posts">
				<li>
					<a href="#"><img src="style/images/art/s1.jpg" alt="" /></a>
					<h5><a href="#">Dolor Commodo Consectetur</a></h5>
					<span>26 Aug 2013 | <a href="#">21 Comments</a></span>
				</li>
				
				<li>
					<a href="#"><img src="style/images/art/s2.jpg" alt="" /></a>
					<h5><a href="#">Dolor Commodo Consectetur</a></h5>
					<span>26 Aug 2013 | <a href="#">21 Comments</a></span>
				</li>
				
				<li>
					<a href="#"><img src="style/images/art/s3.jpg" alt="" /></a>
					<h5><a href="#">Dolor Commodo Consectetur</a></h5>
					<span>26 Aug 2013 | <a href="#">21 Comments</a></span>
				</li>

			</ul>
  	</div>
  	<div class="footer-box one-third">
  	<h3>About</h3>
  	<p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla.</p> 
  	<p>Lorem Ipsum Dolor Sit
          Moon Avenue No:11/21
          Planet City, Earth<br>
          <br>
          <span class="lite1">Fax:</span> +555 797 534 01<br>
          <span class="lite1">Tel:</span> +555 636 646 62<br>
          <span class="lite1">E-mail:</span> name@domain.com</p>
          
          
  	</div>
  	
  	<div class="footer-box one-third last">
  	<h3>Custom Text</h3>
  	<p>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit. </p>
  	<p>Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor.</p>
  	</div>
    </div>
    <!-- End Footer -->
    
    
	</div>
	<!-- End Content -->
	
</div>
<!-- End Wrapper -->
<div class="clear"></div>
<script type="text/javascript" src="style/js/scripts.js"></script>
<!--[if !IE]> -->
<script type="text/javascript" src="style/js/jquery.corner.js"></script>
<!-- <![endif]-->
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>